<template>
    <div class="regMain">
        <!--查看简历-->
        <el-dialog
                title="查看简历"
                :visible.sync="viewResumeVisible"
                width="60%"
                center>
            <el-row :gutter="20" style="border-bottom:5px solid #ccc;padding-bottom:30px;">
                <el-col :span="6" style="text-align:center">
                    <img :src="baseImgUrl+chosenResumeInfo.img" alt="" style="width:90%;height:150px">
                </el-col>
                <el-col :span="9">
                    <div class="text">
                        <label>姓名:</label>
                        <span>{{chosenResumeInfo.userName}}</span>
                    </div>
                    <div class="text">
                        <label>电话:</label>
                        <span>{{chosenResumeInfo.phone}}</span>
                    </div>
                    <div class="text">
                        <label>性别:</label>
                        <span>{{chosenResumeInfo.sex===0?'女':'男'}}</span>
                    </div>
                    <div class="text">
                        <label>学历:</label>
                        <span>{{chosenResumeInfo.record}}</span>
                    </div>
                    <div class="text">
                        <label>专业:</label>
                        <span>{{chosenResumeInfo.professional}}</span>
                    </div>
                    <div class="text">
                        <label>现居住地:</label>
                        <span>{{chosenResumeInfo.address}}</span>
                    </div>
                </el-col>
                <el-col :span="9">
                    <div class="text">
                        <label>出生年月:</label>
                        <span>{{chosenResumeInfo.birthday}}</span>
                    </div>
                    <div class="text">
                        <label>毕业院校:</label>
                        <span>{{chosenResumeInfo.graduation}}</span>
                    </div>
                    <div class="text">
                        <label>工作经验:</label>
                        <span>{{chosenResumeInfo.experience}}年</span>
                    </div>
                    <div class="text">
                        <label>意向职位:</label>
                        <span>{{chosenResumeInfo.intention}}</span>
                    </div>
                    <div class="text">
                        <label>投递职位:</label>
                        <span>{{chosenResumeInfo.positionName}}</span>
                    </div>
                </el-col>
            </el-row>
            <h3 class="diaTitle">培训经历</h3>
            <el-row>
                <el-col :span="24" style="border-bottom:1px solid #ccc;margin-bottom:20px;"
                        v-for="item in chosenResumeInfo.trainings" :key="item.id">
                    <p>{{item.schoolName}}</p>
                    <p style="color:#ccc;">{{item.beginTime}}~{{item.endTime}}</p>
                    <p>{{item.education}} | {{item.major}}</p>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="viewResumeVisible = false">返 回</el-button>
            </span>
        </el-dialog>
        <el-row type="flex" justify="start">
            <el-col :span="24" style="text-align:left">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="意向岗位">
                        <el-input v-model="searchParam.intention" placeholder="职位" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="工作经验">
                        <el-select v-model="searchParam.experience" placeholder="工作年限" size="mini">
                            <el-option label="无限制" value="0"></el-option>
                            <el-option
                                    v-for="item in 20"
                                    :key="item"
                                    :label="item +'年以上'"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select v-model="searchParam.record" placeholder="学历" size="mini">
                            <el-option label="全部" :value="null"></el-option>
                            <el-option
                                    v-for="(item,index) in eduBackGround"
                                    :key="index"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="searchResumeList()">查询
                        </el-button>
                    </el-form-item>

                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <!--                    <el-table-column-->
                    <!--                    type="selection"-->
                    <!--                    width="55">-->
                    <!--                    </el-table-column>-->
                    <!--                    <el-table-column-->
                    <!--                            label="序号"-->
                    <!--                            type="index"-->
                    <!--                            width="50">-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                            prop="userName"
                            label="投递人"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="状态"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span :class="scope.row.status==0?'c-e09017':'c-0f65fa'">{{scope.row.status==0?'未查阅':'已看'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="positionName"
                            label="投递岗位"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="intention"
                            label="意向岗位"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="birthday"
                            label="出生年月"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="record"
                            label="学历"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="工作经验"
                            show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.experience}}年</template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="投递时间"
                            width="150"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="professional"
                            label="专业"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="graduation"
                            label="毕业学校"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作" min-width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="warning"
                                    @click="handleEdit(scope.row)">查看
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="downloadUserResume(scope.row)">下载
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageBox">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchParam.page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="searchParam.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="searchParam.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {deliveredResume, downloadResume, changeDeliveredStatus} from "@/api/viewResumeApi";
    import CommonUtils from "@/utils/CommonUtils";
    import {BASEIMGURL, BASEURL} from "@/api/baseUrl";

    export default {
        data() {
            return {
                baseImgUrl: BASEIMGURL,
                eduBackGround: CommonUtils.getEduBackground(),
                viewResumeVisible: false,
                searchForm: {},
                tableData: [],
                chosenResumeInfo: {},
                multipleSelection: [],
                //查询条件
                searchParam: {
                    intention: null,
                    experience: null,
                    record: null,
                    page: 1,
                    size: 10,
                    total: 0
                }
            }
        },
        created() {
            this.searchResumeList();
        },
        methods: {
            searchResumeList() {
                deliveredResume(this.searchParam).then(res => {
                    this.tableData = res.list;
                    this.searchParam.total = res.total;
                }, err => {
                })

            },
            //使该投递的简历记录为已查阅
            changeUserPositionStatus(id) {
                let param = {
                    userPositionId: id
                }
                changeDeliveredStatus(param).then(res => {
                    this.searchResumeList();
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(row) {
                this.viewResumeVisible = true;
                this.chosenResumeInfo = row;
                this.changeUserPositionStatus(row.userPositionId);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //分页
            handleSizeChange(val) {
                this.searchParam.size = val;
                this.searchResumeList();
            },
            handleCurrentChange(val) {
                this.searchParam.page = val;
                this.searchResumeList();
            },

            //下载简历
            downloadUserResume(row) {
                window.location.href = `${BASEURL}/refer/resume/download/resume/${row.userId}/${row.positionName}`;
            }
        }
    }
</script>

<style lang="scss">

    .regMain {
        overflow: hidden;

        label {
            display: block;
            float: left;
        }

        .pageBox {
            margin-top: 20px;
        }

        .text {
            font-size: 18px;
            margin-top: 15px;

            label {
                font-weight: bold;
            }
        }

        .diaTitle {
            font-size: 20px;
            font-weight: bold;
            margin: 20px auto;
        }
    }
</style>